<template>
  <div class="log col-sm-12" :style="{height: heightData}">
    <div class="col-sm-4 signform col-sm-push-4">
    	<div class="sign_limit_width">   		
	    	<img src="../assets/img/logo.png" alt="" class="sign_logo cursor" @click="goHome()"/>
	    	<h2>登录</h2>
	    	<p class="someInfo">开启你的数据分析之旅</p>
				<div class="form-group text-left">
				    <label for="email">电子邮件</label>
						<input type="email" class="form-control"  placeholder="邮箱" v-model="inputEmail" @blur="checkMail()" v-bind:class="logClassTip0"/>	
						<p class="log_tips" v-if="seenEmail">{{logTip1}}</p>
				  </div>
				  <div class="form-group text-left">
				    <label for="password">密码</label>					
						<input type="password" class="form-control"  placeholder="长度6-30位" v-model="inputPassword"  @keyup.13="keyLogin($event)"/>
						<p class="log_tips" v-if="seenLogin">{{logTip2}}</p>
						<p class="log_tips" style="margin-top:4px;" v-show="notVerification">你的邮箱还未验证
							<a href="javascript:;" @click="resendEmail()" class="link_to">发送验证链接</a>
						</p>
				  </div>
	    		<button class="btn btn_sign" @click="login()">登录</button></br>  	
	    		<p class="quick_entrance">
	    			<router-link :to="{name:'sendEmail'}" class="link_to">忘记密码</router-link>  
	    			<span>或</span>
	    			<router-link :to="{name:'signup'}" class="link_to">立即注册</router-link>			
	    		</p>
		    	<p class="footer_company">© 2016-2018 北京晶派科技有限公司</p>
    	</div>
    </div>
    <!--用户协议和隐私协议-->
    <div class="bomb_box" style="width:346px;height:498px;margin-left:-174px;" v-if="showHideAgree">
    		<p class="login_agreement_con text-left">
    			亲爱的 AtomPai 用户，</br>欢迎回到 AtomPai（现更名为AtomPai.Zero） 。</br>
    			我们更新了《用户协议》和《隐私条款》，
    			请仔细阅读以下链接中的内容并确认同意，继续数据分析之旅。
    		</p>
    		<p class="text-left two_agreements">
    			<router-link :to="{name:'userProtocol'}">AtomPai用户许可协议</router-link></br>
    		  <router-link :to="{name:'privacyAgreement'}">AtomPai隐私协议</router-link>
    		</p>
    		<label class="input_label_beautify" style="margin-left:-20px;">				
			    <input class="input_checkbox" type="checkbox" name="agree_checkbox" v-model="loginAgree" @change="changeLoginAgree()">
			    <span class="input_checkboxInput"></span>我已经阅读以上协议内容
				</label>
				<p class="reg_tips" style="text-align:center;margin-top:20px;"  v-if="notAgree">抱歉，你还未同意以上协议</p>
				<p  class="text-center" style="margin-top:40px;">
					<button class="data_info_cancel btn" @click="bombBoxHide()">取消</button>
					<button class="data_info_sure btn" @click="acceptAgree()">接受</button>
				</p>
				<p></p>
    </div>

  </div>

</template>

<script>
	import {urlLogin,urlAgreement,urlResendEmail} from '../api/api'

	export default {
	  name: 'login',
	  data () {
	    return {
	    	logTip1:'',
	    	logTip2:'',
	    	seenEmail:false,
	    	seenLogin:false,
	    	notAgree:false,
	    	notVerification:false,
	    	logClassTip0:{
	    		'form-control':true,
		      'tip': false
	    	},
	    	inputPassword: '',
        inputEmail:'',
        heightData:'',
        loginAgree:false,
        showHideAgree:false,
        agreeVal:0
	    }
	  },
	  mounted(){
    	  this.heightData=`${document.documentElement.clientHeight}px`;    	  
    },
	  methods: {
	  	goHome(){
				this.$router.replace('/');
			},
	  	bombBoxHide(){
	  		this.showHideAgree=false;
	  	},
	  	changeLoginAgree(){
	  			if(this.loginAgree==false){
						this.agreeVal=0;
					}else{
						this.agreeVal=1;
					}
	  	},
	  	checkMail:function() {	  		
	  		let filter= /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
				if (! filter.test(this.inputEmail)){
					this.logClassTip0.tip=true;
					this.seenEmail=true;
					this.logTip1='抱歉，邮箱格式不正确';
				 	$(".btn_sign").attr("disabled", true)
				}else{
					this.seenEmail=false;	
				 	this.logClassTip0.tip=false;
				 	$(".btn_sign").attr("disabled",false)
				}
			},
			resendEmail(){
					//0: 重发验证邮件,1: 重发重置邮件
					let sendData={
						email:this.inputEmail,
						type:0
					};
					urlResendEmail(sendData).then(response => {
						if(response.data.code==200){
							this.$router.push({name:'resendEmail',params: {email:this.inputEmail}})	
						}else{
							this.seenLogin=true;
							this.logTip2=response.data.message;
						}
	        })				
			},
			login(){	
//				let md5 = require('md5');
				let self = this;
				if(this.inputPassword =='' || this.inputEmail =='' ){
					this.seenLogin=true;	
					return false;
				}else{
					//get token加密
//					let tok = this.inputEmail + ':' + md5(this.inputPassword),  
					let tok = this.inputEmail + ':' + this.inputPassword, 
				      hash = window.btoa(tok);    
					let sendData = {
            key:"Basic " + hash
     			};
     			//登录请求   		
     			urlLogin(sendData).then(response => {
						if(response.data.code==200){
	            let username=response.data.data.username,
	            		token=response.data.data.token;
	            localStorage.setItem('token',token); 
		    			localStorage.setItem('username',username);            
          		console.log('登录ok')
          		self.$router.replace('/dashboard')	         		
          }else if(response.data.code==10006){
	          		this.notVerification=true;
	          }else if(response.data.code==10007){
	          		this.showHideAgree=true;
	          }
        }).catch(error => {    		
            if(error.response.data.code==401){
	            this.seenLogin=true;
          		this.logTip2='抱歉，密码无效';	        			
	        		
						}
          });
				}
			},
			keyLogin(ev){
				if(ev.keyCode == 13){  
          this.login();
        } 
			},
			acceptAgree(){
				if(this.agreeVal==0){
					this.notAgree=true;
					return false;
				}else{					
					let sendData={
						email:this.inputEmail,
						agreed:this.agreeVal
					}
					urlAgreement(sendData).then(response => {
							if(response.data.code==200){
									this.login();
	          	}else if(response.data.code==201){
		          	alert(response.data.message)
		          }
	        })
				}
			}
		}
	}
</script>

<style >
	@import "../assets/css/sign.css"
</style>
